<template>
  <!-- 
    1. 在 el-form 要绑定 :model 和 :rules 它们分别对应着 值和规则
    2. 在要校验的表单(el-form-item) 绑定属性 prop
    3. 在要校验的内容(el-form-item的内部) 绑定对应的值 v-model
  -->
  <el-form
    ref="formRef"
    :model="form"
    :rules="formRules"
    label-width="auto"
    style="max-width: 600px"
  >
    <!-- 
      prop 是校验规则的键（所以它是字符串 不用添加 :）
      根据它来找到 formRules 提供的校验规则 
      不过推荐名字相同 不然会数据榜上了但是校验是失败的
    -->
    <el-form-item
      label="Activity name"
      prop="name"
    >
      <el-input v-model="form.name" />
    </el-form-item>
    <el-form-item
      label="Activity zone"
      prop="region"
    >
      <el-select
        v-model="form.region"
        placeholder="please select your zone"
      >
        <el-option
          label="Zone one"
          value="shanghai"
        />
        <el-option
          label="Zone two"
          value="beijing"
        />
      </el-select>
    </el-form-item>
    <el-form-item
      label="Activity time"
      prop="date"
    >
      <el-time-picker
        v-model="form.date"
        placeholder="Pick a time"
        style="width: 100%"
      />
    </el-form-item>
    <el-form-item label="Instant delivery">
      <el-switch v-model="form.delivery" />
    </el-form-item>
    <el-form-item
      label="Activity type"
      prop="type"
    >
      <el-checkbox-group v-model="form.type">
        <el-checkbox
          value="Online activities"
          name="type"
        >
          Online activities
        </el-checkbox>
        <el-checkbox
          value="Promotion activities"
          name="type"
        >
          Promotion activities
        </el-checkbox>
        <el-checkbox
          value="Offline activities"
          name="type"
        >
          Offline activities
        </el-checkbox>
        <el-checkbox
          value="Simple brand exposure"
          name="type"
        >
          Simple brand exposure
        </el-checkbox>
      </el-checkbox-group>
    </el-form-item>
    <el-form-item
      label="Resources"
      prop="resource"
    >
      <el-radio-group v-model="form.resource">
        <el-radio value="Sponsor">Sponsor</el-radio>
        <el-radio value="Venue">Venue</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item
      label="Activity form"
      prop="desc"
    >
      <el-input
        v-model="form.desc"
        type="textarea"
      />
    </el-form-item>
    <el-form-item>
      <el-button
        type="primary"
        @click="onSubmit"
      >提 交</el-button>
      <el-button @click="onReset">重 置</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue'

  // do not use same name with ref
  const form = reactive({
    name: '',
    region: '',
    date: '',
    delivery: false,
    type: [],
    resource: '',
    desc: '',
  })

  // 添加校验规则
  const formRules = {
    // 属性名 由于一个属性可以有多个校验规则 所以用数组
    name: [
      /*
        每一条校验规则可以看为一个对象
        message 是不符合规范所提示的信息
        trigger 是当什么时候校验
        min 是最小长度 max 是最大长度
        required 表示是否必填
      */
      { min: 5, max: 10, message: '长度必须是5到10', trigger: 'blur' },
      { required: true, message: '请输入内容', trigger: 'blur' },
    ],
    // 活动地址
    region: [{
      required: true,
      message: '请选择活动地址',
      trigger: 'change'
    }],
    date: [{
      type: 'date', // 时间类型
      required: true,
      message: '请选择正确的时间',
      trigger: 'change'
    }],
    type: [{
      type: 'array',
      required: true,
      message: '请至少选择一种活动类型',
      trigger: 'change'
    }],
    resource: [{
      required: true,
      message: '请选择活动资源',
      trigger: 'change'
    }],
    desc: [{
      required: true,
      message: '请输入活动信息',
      trigger: 'blur'
    }]
  }

  // 表单DOM
  const formRef = ref(null)
  const onSubmit = () => {
    // formRef.value.validate 是校验全部 内部传入回调函数
    formRef.value.validate((valid) => {
      // console.log(valid);
      if (!valid) return alert('请输入合理的值')
      console.log('ok');
    })
  }

  const onReset = () => {
    formRef.value.resetFields()
  }



</script>
